<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%layout("/WEB-INF/view/common/inc/admin_head.html",{title:'系统主页', styles:'bootstrap,animate,style,font-awesome,bootstrap-table'}){%>
    <style>

    </style>
    <%}%>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">总</span>
                    <h5>待审批</h5>
                </div>
                <div class="ibox-content">
                    <h4 class="no-margins" id="orderTotal">0</h4>
                    <div class="stat-percent font-bold text-success"></i>
                    </div>
                    <small>请购单</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class=
                             "ibox-title">
                    <span class="label label-info pull-right">总</span>
                    <h5>待审批</h5>
                </div>
                <div class="ibox-content">
                    <h4 class="no-margins" id="produceTotal">0</h4>
                    <div class="stat-percent font-bold text-info"></i>
                    </div>
                    <small>采购单</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-danger pull-right">总</span>
                    <h5>待采购</h5>
                </div>
                <div class="ibox-content">
                    <h4 class="no-margins" id="buy">0</h4>
                    <div class="stat-percent font-bold text-danger"> </i>
                    </div>
                    <small>待采购</small>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>上新统计图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-newProduct-chart" style="height: 300px;margin-top: -50px;"></div>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>海外仓海运计划统计图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-physical-ware-chart" style="height: 300px;margin-top: -50px;"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>海运计划统计图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-physical-chart" style="height: 300px;margin-top: -50px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row" style="height: 500px">
        <div class="col-sm-12"  style="height: 100%;">
            <div class="ibox float-e-margins"  style="height: 100%;">
                <div class="ibox-title">
                    <h5>上新统计图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content" style="height: 100%;">
                    <div class="echarts" id="echarts-sell-chart" style="height: 100%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<%layout("/WEB-INF/view/common/inc/admin_js.html",{modules:'jquery,bootstrap,bootstrap-table,bootstrap-table-zh-CN,layer,datepicker,echarts'}){}%>

<script>

    $(function(){
        getOrderStatusNumber();
        getNewProductNumber();
        getNewProductRecord();
        getPhysicalNumber();
        getWarePhysicalNumber();
    });

    function getOrderStatusNumber() {
        $.post('/dashboard/getStatusNumber','',function(data){
            if( data.ok ){
                console.log(data);
                var res = data.data;
                var produce=res[0].produce;
                var produceTotal=0;

                for(var i=0;i<produce.length;i++){
                    produceTotal+=produce[i].produceTotal;
                    if(produce[i].produceStatus==2){
                        $('#produceTotal').text(produce[i].produceTotal);
                    }

                }
                var order=res[1].order;
                console.log(order);
                var orderNumber=0;
                for(var i=0;i<order.length;i++){
                    orderNumber=order[i].orderNumber;
                    if(order[i].orderStatus==2){
                        $('#orderTotal').text(orderNumber);

                    }
                }

                var buy=res[2].buy;
                if(null==buy){
                    $("#buy").text(0);
                } else{
                    $("#buy").text(buy);
                }

            }
        });
    }

    function getNewProductNumber() {
        $.ajax({
            url:'/dashboard/getNewProductNumber.do',
            async:true,
            success:function (data) {
                if( data.ok ){
                    initNewProductChart(data.data);
                }else{
                    console.log(data);
                }
            }
        });
    }

    function getNewProductRecord() {
        $.ajax({
            url:'/dashboard/getNewProductRecord.do',
            async:true,
            success:function (data) {
                if( data.ok ){
                    console.log(data);
                    initManChart2(data.data);
                }else{
                    console.log(data);
                }
            }
        });
    }

    function getPhysicalNumber() {
        $.ajax({
            url:'/dashboard/getLogisticsStatus.do',
            async:true,
            success:function (data) {
                if( data.ok ){
                    console.log(data);
                    initPhysicalChart(data.data);
                }else{
                    console.log(data);
                }
            }
        });
    }

    function getWarePhysicalNumber() {
        $.ajax({
            url:'/dashboard/getWareLogisticsStatus.do',
            async:true,
            success:function (data) {
                if( data.ok ){
                    console.log(data);
                    initPhysicalWareChart(data.data);
                }else{
                    console.log(data);
                }
            }
        });
    }


    //初始化海运计划条形图
    function  initPhysicalWareChart(data){
        var physicalChart = echarts.init(document.getElementById('echarts-physical-ware-chart'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['待发运','已发运','已送货']
            },
            itemStyle: {
                //通常情况下：
                normal:{
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            series: [
                {
                    name: '',
                    type: 'bar',
                    data: [
                        data.physicalUntreated,
                        data.physicalAllocated,
                        data.physicalShipped
                    ]
                },
            ]};
        physicalChart.setOption(option);
    }


    //初始化海运计划条形图
    function  initPhysicalChart(data){
        var physicalChart = echarts.init(document.getElementById('echarts-physical-chart'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['待发运','已发运','已开船','已清关','已送货']
            },
            itemStyle: {
                //通常情况下：
                normal:{
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
                        return colorList[params.dataIndex];
                    }
                },
                //鼠标悬停时：
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            series: [
                {
                    name: '',
                    type: 'bar',
                    data: [
                        data.physicalUntreated+data.physicalAllocated,
                        data.physicalShipped,
                        data.physicalShipboard,
                        data.physicalClearance,
                        data.physicalDelivery
                    ]
                },
            ]};
        physicalChart.setOption(option);
    }

    function initManChart2(data) {
        var myLineChart = echarts.init(document.getElementById('echarts-sell-chart'));
        var option = {
            tooltip: {
                trigger: 'axis',
                // backgroundColor: 'rgba(255,255,255,0.7)',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                x: 'right',
                data:['已上新']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                y: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            grid: {
                y: 80,
                y2: 40,
                x2: 40
            },
            xAxis: [
                {
                    type: 'category',
                    data: data[0].date
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '预计上新',
                    type: 'bar',
                    // data: [4804.7,1444.3,1332.1,908]
                    data:data[1].yj
                },
                {
                    name: '实际上新',
                    type: 'bar',
                    // data: [5506.3,1674.7,1405,1023.2]
                    data:data[2].sj
                }

            ]
        };
        myLineChart.setOption(option);
    }





    //初始化海运计划条形图
    function  initNewProductChart(data){
        var physicalChart = echarts.init(document.getElementById('echarts-newProduct-chart'));
        option = {

            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['已企划', '待下单', '待出运', '待上市', '待上新', '已上新']
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        physicalChart.setOption(option);
    }
</script>

</body>
</html>
